﻿<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
  <!ENTITY nbsp "&#x00A0;">
]>
<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxml="urn:schemas-microsoft-com:xslt"
  xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">

  <xsl:output method="xml" omit-xml-declaration="yes"/>

  <xsl:template match="/">

    <xsl:call-template name="html5Video">
      <xsl:with-param name="htmlID"         select="/macro/htmlID" />
      <xsl:with-param name="css"            select="/macro/css" />
      <xsl:with-param name="posterImageUrl" select="/macro/posterImageUrl" />
      <xsl:with-param name="sourceMP4"      select="/macro/sourceMP4" />
      <xsl:with-param name="sourceWebM"     select="/macro/sourceWebM" />
      <xsl:with-param name="sourceOgg"      select="/macro/sourceOgg" />
      <xsl:with-param name="videoWidth"     select="/macro/videoWidth" />
      <xsl:with-param name="videoHeight"    select="/macro/videoHeight" />
      <xsl:with-param name="videoPreload"   select="/macro/videoPreload" />
      <xsl:with-param name="videoAutoplay"  select="/macro/videoAutoplay"/>
      <xsl:with-param name="videoControls"  select="/macro/videoControls" />
      <xsl:with-param name="downloadLinks"  select="/macro/downloadLinks"/>
    </xsl:call-template>

  </xsl:template>

  <xsl:template name="html5Video">

    <!-- PARAMETERS -->
    <xsl:param name="htmlID" />         <!-- Id of the video tag -->
    <xsl:param name="css" />            <!-- A css class for the video tag -->
    <xsl:param name="posterImageUrl" /> <!-- Url to a poster image -->
    <xsl:param name="sourceMP4" />      <!-- Comma seperated list of mp4 url sources -->
    <xsl:param name="sourceWebM" />     <!-- Comma seperated list of webM url sources -->
    <xsl:param name="sourceOgg" />      <!-- Comma seperated list of ogg url sources -->
    <xsl:param name="videoWidth" />     <!-- Width of video - Integer -->
    <xsl:param name="videoHeight" />    <!-- Height of video - Integer -->
    <xsl:param name="videoPreload" />   <!-- Preload the video - Boolean -->
    <xsl:param name="videoAutoplay" />  <!-- Autoplay the video - Boolean -->
    <xsl:param name="videoControls" />  <!-- Show video controls to control the video - Boolean -->
    <xsl:param name="downloadLinks" />  <!-- Show download links if the video cant display - Boolean -->

    <xsl:choose>
      <xsl:when test="$htmlID != '' and $videoWidth != '' and $videoHeight != '' and ( $sourceMP4 != '' or $sourceWebM != '' or $sourceOgg != '' )">

        <xsl:variable name="sourcesMP4"   select="Exslt.ExsltStrings:split( $sourceMP4, ',' )" />
        <xsl:variable name="sourcesWebM"  select="Exslt.ExsltStrings:split( $sourceWebM, ',' )" />
        <xsl:variable name="sourcesOgg"   select="Exslt.ExsltStrings:split( $sourceOgg, ',' )" />

        <!-- Begin VideoJS -->
        <div class="video-js-box">
          <xsl:if test="$css != ''">
            <xsl:attribute name="class">
              <xsl:value-of select="concat('video-js-box',' ', $css)" />
            </xsl:attribute>
          </xsl:if>

          <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
          <video id="{$htmlID}" class="video-js" width="{$videoWidth}" height="{$videoHeight}">

            <!-- Controls (Attribute) -->
            <xsl:if test="$videoControls = 1">
              <xsl:attribute name="controls">
                <xsl:text>controls</xsl:text>
              </xsl:attribute>
            </xsl:if>

            <!-- Preload (Attribute) -->
            <xsl:if test="$videoPreload = 1">
              <xsl:attribute name="preload">
                <xsl:text>auto</xsl:text>
              </xsl:attribute>
            </xsl:if>

            <!-- Autoplay (Attribute) -->
            <xsl:if test="$videoAutoplay = 1">
              <xsl:attribute name="autoplay">
                <xsl:text>autoplay</xsl:text>
              </xsl:attribute>
            </xsl:if>

            <!-- Poster (Attribute) -->
            <xsl:if test="$posterImageUrl != ''">
              <xsl:attribute name="poster">
                <xsl:value-of select="$posterImageUrl"/>
              </xsl:attribute>
            </xsl:if>

            <!-- VIDEOS -->
            <xsl:if test="count($sourcesMP4) > 0">
              <xsl:for-each select="$sourcesMP4">
                <source src="{.}" type="video/mp4;" />
              </xsl:for-each>
            </xsl:if>
            <xsl:if test="count($sourcesWebM) > 0">
              <xsl:for-each select="$sourcesWebM">
                <source src="{.}" type="video/webm" />
              </xsl:for-each>
            </xsl:if>
            <xsl:if test="count($sourcesOgg) > 0">
              <xsl:for-each select="$sourcesOgg">
                <source src="{.}" type="video/ogg" />
              </xsl:for-each>
            </xsl:if>

            <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
            <object class="vjs-flash-fallback" width="{$videoWidth}" height="{$videoHeight}" type="application/x-shockwave-flash"
                    data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
              <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
              <param name="allowfullscreen" value="true" />
              <param name="flashvars">
                <!-- No other nice way to build this string up -->
                <xsl:attribute name="value">
                  <xsl:text>config={"playlist":[</xsl:text>
                  <xsl:if test="$posterImageUrl != ''">
                    <xsl:text>"</xsl:text>
                    <xsl:value-of select="$posterImageUrl"/>
                    <xsl:text>",</xsl:text>
                  </xsl:if>

                  <xsl:text>{"url": "</xsl:text>
                  <xsl:value-of select="$sourcesMP4[1]" />
                  <xsl:text>"</xsl:text>

                  <xsl:text>,"autoPlay":</xsl:text>
                  <xsl:choose>
                    <xsl:when test="$videoAutoplay = 1">
                      <xsl:text>true</xsl:text>
                    </xsl:when>
                    <xsl:otherwise>
                      <xsl:text>false</xsl:text>
                    </xsl:otherwise>
                  </xsl:choose>

                  <xsl:text>,"autoBuffering":</xsl:text>
                  <xsl:choose>
                    <xsl:when test="$videoPreload = 1">
                      <xsl:text>true</xsl:text>
                    </xsl:when>
                    <xsl:otherwise>
                      <xsl:text>false</xsl:text>
                    </xsl:otherwise>
                  </xsl:choose>

                  <xsl:text>}]}</xsl:text>
                </xsl:attribute>
              </param>

              <xsl:if test="$posterImageUrl != ''">
                <!-- Image Fallback. Typically the same as the poster image. -->
                <img src="{$posterImageUrl}" width="{$videoWidth}" height="{$videoHeight}" alt="Poster Image" title="No video playback capabilities." />
              </xsl:if>
            </object>
          </video>

          <!-- Download links provided for devices that can't play video in the browser. -->
          <xsl:if test="$downloadLinks = 1">
            <p class="vjs-no-video">
              <strong>Download Video:</strong>
              <xsl:if test="count($sourcesMP4) > 0">
                <xsl:for-each select="$sourcesMP4">
                  <a href="{.}">MP4</a>
                </xsl:for-each>
              </xsl:if>
              <xsl:if test="count($sourcesWebM) > 0">
                <xsl:for-each select="$sourcesWebM">
                  <a href="{.}">WebM</a>
                </xsl:for-each>
              </xsl:if>
              <xsl:if test="count($sourcesOgg) > 0">
                <xsl:for-each select="$sourcesOgg">
                  <a href="{.}">Ogg</a>
                </xsl:for-each>
              </xsl:if>
            </p>
          </xsl:if>
        </div>
        <!-- End VideoJS -->

      </xsl:when>
      <xsl:otherwise>
        <div>
          You have to specify - htmlID, videoWidth, videoHeight and 1 of the video sources ( sourceMP4, sourceWebM, sourceOgg )
        </div>
      </xsl:otherwise>
    </xsl:choose>

  </xsl:template>

</xsl:stylesheet>
